//Global
import React, { FC, useMemo } from "react";

//Components
import { ModalCartContentEmpty } from "./ModalCartContentEmpty";
import { CartItem } from "@/components/cartItem/CartItem";
import { Button } from "@mui/material";

//Hooks
import { useTypedSelector } from "@/hooks/useTypedSelector";
import { useModalActions } from "@/hooks/useModalActions";
import { useCart } from "@/hooks/useCart";
import { useToastMessage } from "@/hooks/useToastMessage";

//Styles
import styles from "@/styles/cart.module.css";

const ModalCartContent: FC = () => {
  const { currentUser } = useTypedSelector(state => state.user),
    { modalCart } = useTypedSelector(state => state.modals);

  const { showToastMessage } = useToastMessage();

  const {
    changeModalClasses,
    onChangeModalCartStatus,
    onChangeModalOrderStatus,
  } = useModalActions();
  const { onClearUserCart } = useCart();

  const totalPrice = useMemo(() => {
    return currentUser.userCart.reduce(
      (sum, currItem) => sum + currItem.totalPrice,
      0
    );
  }, [currentUser.userCart]);

  const totalQuantity = currentUser.userCart.reduce(
    (sum, currItem) => sum + currItem.count,
    0
  );

  const onResetUserCart = () => {
    onClearUserCart();
    showToastMessage("success", "Your cart was cleared!");
  };

  const handleClick = () => {
    onChangeModalCartStatus(false);

    const timer = setTimeout(() => {
      onChangeModalOrderStatus(true);
      clearTimeout(timer);
    }, 300);
  };

  const modalContent = changeModalClasses({
    modalStatus: modalCart,
    modalClass: styles.modalCartContent,
    modalActiveClass: styles.modalCartContentActive,
  });

  const blockStyles = {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
  } as const;

  const infoText = `Total Quantity: ${totalQuantity} ${
    totalQuantity > 1 ? "things" : "thing"
  }`;

  const priceText = `Total Price: ${totalPrice} $`;

  const blockStyle = !currentUser.userCart.length ? blockStyles : undefined;

  return (
    <div
      onClick={e => e.stopPropagation()}
      className={modalContent}
      style={blockStyle}
    >
      {!currentUser.userCart.length ? (
        <ModalCartContentEmpty />
      ) : (
        <>
          <h5 className={styles.modalCartTitle}>Your Cart!</h5>

          <span className={styles.modalCartInfo}>{infoText}</span>
          <span className={styles.modalCartInfo}>{priceText}</span>

          <div className={styles.cardsWrapper}>
            {currentUser.userCart.map(pizza => (
              <CartItem key={pizza.id} pizza={pizza} />
            ))}

            <div className={styles.modalCartContentButtons}>
              <Button
                data-order
                className={styles.buttonOrder}
                onClick={handleClick}
              >
                Make an order
              </Button>

              {currentUser.userCart.length > 1 && (
                <Button
                  variant="text"
                  data-reset
                  className={styles.buttonReset}
                  onClick={onResetUserCart}
                >
                  Reset cart
                </Button>
              )}
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export { ModalCartContent };
